<template>
  <el-dialog
    :model-value="visible"
    title="请选择"
    width="800"
    :before-close="handleClose"
  >
    <AmapContainer ref="amapContainer" />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button
          type="primary"
          :disabled="amapContainer?.iMap?.canSubmit"
          @click="handleConfirm"
          >确认</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="AmapExplore">
/*
  // 使用方式
  // amapFlag: 控制弹窗显隐
  // iMap必须ref定义, 接收选择地址数据
  // 示例：
  // <AmapExplore v-model:visible="amapFlag" v-model:amap="iMap" />
*/
import { ref, withDefaults } from 'vue'
import type { IAddress } from '../interface/index'
import AmapContainer from './AmapContainer.vue'

withDefaults(
  defineProps<{
    visible: boolean
    amap: Partial<IAddress>
  }>(),
  {
    visible: false,
  },
)

const amapContainer = ref()

// 定义emits
const emits = defineEmits<{
  'update:amap': [value: IAddress]
  'update:visible': [value: boolean]
}>()

const handleConfirm = () => {
  emits('update:amap', { ...amapContainer.value?.iMap })
  handleClose()
}

const handleClose = () => {
  emits('update:visible', false)
}
</script>

<style scoped lang="scss"></style>
